<template>
    <div>
        <!--面包屑导航区域-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home_emp' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>我的信息</el-breadcrumb-item>
        </el-breadcrumb>
        <!--卡片视图区域-->
        <el-card>
            <!--个人信息区域-->
            <el-descriptions class="margin-top" title="个人信息" :column="3" :size="size" border>
                <template #extra>
                    <el-button type="primary" @click="showEditDialog">修改</el-button>
                </template>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <user />
                            </el-icon>
                            用户名
                        </div>
                    </template>
                    {{this.info.id}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <lock />
                            </el-icon>
                            密码
                        </div>
                    </template>
                    {{this.info.passwd}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <tickets />
                            </el-icon>
                            账户类型
                        </div>
                    </template>
                    <el-tag size="small">应聘者</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <avatar />
                            </el-icon>
                            姓名
                        </div>
                    </template>
                    {{this.info.name}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <CreditCard />
                            </el-icon>
                            身份证号
                        </div>
                    </template>
                    {{this.info.number}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <Phone />
                            </el-icon>
                            联系电话
                        </div>
                    </template>
                    {{this.info.phone}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <Help />
                            </el-icon>
                            安全问题
                        </div>
                    </template>
                    {{this.info.question}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <Key />
                            </el-icon>
                            答案
                        </div>
                    </template>
                    {{this.info.answer}}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <!--修改信息对话框-->
        <el-dialog title="修改个人信息" v-model="editInfoVisible" width="50%" @close="editDialogClosed">
            <!--内容主体区域-->
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="80px">
                <el-form-item label="用户名" prop="editid">
                    <el-input v-model="info.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="editpasswd">
                    <el-input v-model="editForm.editpasswd" type="password"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="editname">
                    <el-input v-model="editForm.editname"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="editnumber">
                    <el-input v-model="editForm.editnumber"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="editphone">
                    <el-input v-model="editForm.editphone"></el-input>
                </el-form-item>
                <el-form-item label="安全问题" prop="editquestion">
                    <el-input v-model="editForm.editquestion"></el-input>
                </el-form-item>
                <el-form-item label="答案" prop="editanswer">
                    <el-input v-model="editForm.editanswer"></el-input>
                </el-form-item>
            </el-form>
            <!--底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="editInfoVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            info: {
                id: '',
                passwd: '',
                name: '',
                phone: '',
                number: '',
                question: '',
                answer: ''
            },
            //控制修改岗位对话框的显示与隐藏
            editInfoVisible: false,
            editForm: {
                editid: '',
                editpasswd: '',
                editname: '',
                editphone: '',
                editnumber: '',
                editquestion: '',
                editanswer: ''
            },
            //修改表单的验证规则
            editFormRules: {
            }
        }
    },
    created() {
        this.getEmpInfo();
    },
    methods: {
        async getEmpInfo() {
            const json = {
                id: window.sessionStorage.getItem('token'),
                type: 0
            };
            const { data: res } = await this.$http.post('getInfoByID', json)
            if (res.error_code !== 0) {
                return this.$message.error('获取个人信息失败！')
            }
            this.info.id = res.data.ID;
            this.info.passwd = res.data.passwd;
            this.info.name = res.data.name;
            this.info.phone = res.data.phone;
            this.info.number = res.data.number;
            this.info.question = res.data.que;
            this.info.answer = res.data.ans;
        },
        //监听修改对话框的关闭事件
        editDialogClosed() {
            this.$refs.editFormRef.resetFields()
        },
        //点击修改
        async edit() {
            this.$refs.editFormRef.validate(async valid => {
                if (!valid) return
                const json = {
                    id: window.sessionStorage.getItem('token'),
                    passwd: this.editForm.editpasswd,
                    type: 0,
                    name: this.editForm.editname,
                    number: this.editForm.editnumber,
                    phone: this.editForm.editphone,
                    que: this.editForm.editquestion,
                    ans: this.editForm.editanswer
                };
                const { data: res } = await this.$http.post('changeEmpInfo', json)
                if (res.error_code !== 0) {
                    return this.$message.error('修改个人信息失败')
                }
                this.$message.success('修改成功')
                //隐藏修改岗位对话框
                this.editInfoVisible = false
                //重新获取信息数据
                this.getEmpInfo()
            })
        },
        //展示编辑对话框
        async showEditDialog() {
            this.editForm = this.info;
            this.editInfoVisible = true
        }
    }
}
</script>

<style lang="less" scoped>

</style>